<template>
    <div class="qilin-QilinView">
        <QilinExplain title="查看组件" date="2023-09-21">
            <template v-slot:content>
                <QilinView v-model:viewConfig="viewConfig" ref="viewConfigRef"></QilinView>
                <CodeMirror :codeValue="getCodeValue"></CodeMirror>
            </template>
        </QilinExplain>
    </div>
</template>

<script setup>
import Qilin from "qilin-utils";

/*
    数据变量定义区域
*/
// 获取查看组件元素DOM
const viewConfigRef=ref(null);


/*
    计算属性等代码区域
*/
// 查看详情组件逻辑代码
const getCodeValue=computed(()=>{
    return `
        // 占位元素
        <QilinView v-model:viewConfig="viewConfig" ref="viewConfigRef"></QilinView>

        // 查看详情配置项
        const viewConfig=reactive({
            isTable:true,
            headerConfig:{
                hideHeader:true
            },
            itemConfig:[
                {
                    type:"text",
                    label:"工号",
                    value:"userName",
                    col:8
                },
                {
                    type:"text",
                    label:"姓名",
                    value:"nickName",
                    col:8
                },
                {
                    type:"text",
                    label:"邮箱",
                    value:"email",
                    valueEllipsis:true,
                    col:8
                },
                {
                    type:"text",
                    label:"手机号码",
                    value:"phonenumber",
                    col:8
                },
                {
                    type:"slot",
                    label:"性别",
                    value:"sex",
                    slotName:"sex",
                    col:8
                },
                {
                    type:"slot",
                    label:"账号状态",
                    value:"status",
                    slotName:"status",
                    col:8
                },
                {
                    type:"text",
                    label:"合作单位",
                    value:"customCooperator",
                    col:8
                },
                {
                    type:"text",
                    label:"岗位名称",
                    value:"customJobs",
                    col:8
                },
                {
                    type:"text",
                    label:"民族",
                    value:"customNation",
                    col:8
                },
                {
                    type:"text",
                    label:"年龄",
                    value:"customAge",
                    col:8
                },
                {
                    type:"text",
                    label:"出生日期",
                    value:"birthday",
                    col:8
                },
                {
                    type:"text",
                    label:"最高学历",
                    value:"customEducation",
                    col:8
                },
                {
                    type:"text",
                    label:"毕业院校",
                    value:"customSchool",
                    col:8
                },
                {
                    type:"text",
                    label:"专业",
                    value:"customMajor",
                    col:8
                },
                {
                    type:"text",
                    label:"岗位职级",
                    value:"customRank",
                    col:8
                },
                {
                    type:"slot",
                    label:"是否党员",
                    value:"customPartyMember",
                    slotName:"customPartyMember",
                    col:8
                },
                {
                    type:"text",
                    label:"身份证号码",
                    value:"customIdNum",
                    col:8
                },
                {
                    type:"text",
                    label:"身份证有效期",
                    value:"customIdNumLife",
                    col:8
                },
                {
                    type:"text",
                    label:"紧急联系人",
                    value:"customExigencyContact",
                    col:8
                },
                {
                    type:"text",
                    label:"紧急联系人电话",
                    value:"customExigencyPhone",
                    labelEllipsis:true,
                    col:8
                },
                {
                    type:"slot",
                    label:"用户状态",
                    value:"customUserState",
                    slotName:"customUserState",
                    col:8
                },
                // {
                //     type:"text",
                //     label:"工龄",
                //     value:"workYearLevel",
                //     col:8
                // },
                {
                    type:"text",
                    label:"驻场开始时间",
                    value:"customOnSitTime",
                    col:12
                },
                {
                    type:"text",
                    label:"预计转正时间",
                    value:"customPositiveTime",
                    col:12
                },
                {
                    type:"text",
                    label:"实际转正时间",
                    value:"customRealPositiveTime",
                    col:12
                },
                {
                    type:"date",
                    format:"yyyy-MM-dd",
                    label:"本期合同开始时间",
                    value:"customContractStart",
                    labelEllipsis:true,
                    col:12
                },
                {
                    type:"text",
                    label:"本期合同终止时间",
                    value:"customContractEnd",
                    labelEllipsis:true,
                    col:12
                },
                {
                    type:"text",
                    label:"合同到期提醒",
                    value:"customContractExpireWarn",
                    col:12
                },
                {
                    type:"text",
                    label:"家庭住址",
                    value:"customAddress",
                    col:12
                },
                {
                    type:"text",
                    label:"社保缴费卡号",
                    value:"customSocialSecurityCard",
                    col:12
                },
                {
                    type:"text",
                    label:"工资卡号",
                    value:"customBankCard",
                    col:12
                },
                {
                    type:"text",
                    label:"开户行",
                    value:"customBankName",
                    col:12
                },
                {
                    type:"text",
                    label:"社保所属地",
                    value:"customSocialSecurityAdd",
                    col:12
                },
                {
                    type:"text",
                    label:"开户地",
                    value:"customBankAddress",
                    col:12
                },
                {
                    type:"slot",
                    label:"有无本地公积金",
                    value:"customReservefundFlag",
                    labelEllipsis:true,
                    slotName:"customReservefundFlag",
                    col:12
                },
                {
                    type:"text",
                    label:"入职前社保缴纳月数",
                    value:"customBeforeSocialMonth",
                    labelEllipsis:true,
                    col:12
                },
                {
                    type:"text",
                    label:"社保缴纳总月数",
                    value:"customAllSociaMonth",
                    labelEllipsis:true,
                    col:12
                },
                {
                    type:"slot",
                    label:"婚姻状况",
                    value:"marriageState",
                    slotName:"marriageState",
                    col:12
                },
                {
                    type:"slot",
                    label:"家庭成员情况",
                    value:"familyMember",
                    slotName:"familyMember",
                    col:24
                }
            ],
            viewData:{
                userName:"",
                nickName:"",
                userType:"",
                email:"",
                phonenumber:"",
                sex:"",
                status:"",
                customCooperator:"",
                customJobs:"",
                customNation:"",
                customAge:"",
                birthday:"",
                customEducation:"",
                customSchool:"",
                customMajor:"",
                customRank:"",
                customPartyMember:"",
                customIdNum:"",
                customIdNumLife:"",
                customExigencyContact:"",
                customExigencyPhone:"",
                customOnSitTime:"",
                customPositiveTime:"",
                customRealPositiveTime:"",
                customUserState:"",
                customContractStart:"",
                customContractEnd:"",
                customContractExpireWarn:"",
                customAddress:"",
                customSocialSecurityCard:"",
                customBankCard:"",
                customBankName:"",
                customSocialSecurityAdd:"",
                customBankAddress:"",
                customReservefundFlag:"",
                workYearLevel:"",
                customBeforeSocialMonth:"",
                marriageState:"",
                familyMember:""
            }
        });

        // 配置项代码注释
        viewConfig:{
            type:Object,
            default(){
                return {
                    isTable:false, //是否为表格形式
                    headerConfig:{
                        hideHeader:false, //是否隐藏头部标题部分元素
                        headerText:"", //头部标题内容
                    },
                    itemConfig:[
                        {
                            type:"text", //显示数据类型
                            textarea:false, //text类型是否是textarea
                            slotName:"", //slot元素的name，当且仅当type为slot时需要
                            format:"", //显示日期格式配置项，当且仅当type为date时需要
                            label:"姓名", //显示label字段名称
                            value:"name", //显示数据名称--对应viewData
                            col:8, //栅栏格数--默认8
                            className:"", //额外添加在el-col元素上的类名
                            labelSuffix:"", //label名称后缀符号，默认为空字符串
                            labelEllipsis:false, //若label名过长是否设置隐藏悬浮显示--默认false
                            labelEllipsisPlacement:"left", //label超出长度悬浮提示位置
                            labelEllipsisEffect:"dark", //label超出长度悬浮提示样式类型
                            valueEllipsis:false, //若value数据过长是否设置隐藏悬浮提示--默认false
                            valueEllipsisPlacement:"top", //value数据超出长度悬浮提示位置
                            valueEllipsisEffect:"dark", //value数据超出长度悬浮提示样式类型
                            isHide:false, //是否显示该项
                            click:"", //点击事件
                            isHideFn:"", //判断当前项是否隐藏的方法
                        }
                    ],
                    viewData:{
                        name:"我是你爹我是你爹我是你爹我是你爹我是你爹我是你爹"
                    }
                }
            }
        }
    `
});


/*
    逻辑脚本代码区域
*/

// 查看详情配置项
const viewConfig=reactive({
    isTable:true,
    headerConfig:{
        hideHeader:true
    },
    itemConfig:[
        {
            type:"text",
            label:"工号",
            value:"userName",
            col:8
        },
        {
            type:"text",
            label:"姓名",
            value:"nickName",
            col:8
        },
        {
            type:"text",
            label:"邮箱",
            value:"email",
            valueEllipsis:true,
            col:8
        },
        {
            type:"text",
            label:"手机号码",
            value:"phonenumber",
            col:8
        },
        {
            type:"slot",
            label:"性别",
            value:"sex",
            slotName:"sex",
            col:8
        },
        {
            type:"slot",
            label:"账号状态",
            value:"status",
            slotName:"status",
            col:8
        },
        {
            type:"text",
            label:"合作单位",
            value:"customCooperator",
            col:8
        },
        {
            type:"text",
            label:"岗位名称",
            value:"customJobs",
            col:8
        },
        {
            type:"text",
            label:"民族",
            value:"customNation",
            col:8
        },
        {
            type:"text",
            label:"年龄",
            value:"customAge",
            col:8
        },
        {
            type:"text",
            label:"出生日期",
            value:"birthday",
            col:8
        },
        {
            type:"text",
            label:"最高学历",
            value:"customEducation",
            col:8
        },
        {
            type:"text",
            label:"毕业院校",
            value:"customSchool",
            col:8
        },
        {
            type:"text",
            label:"专业",
            value:"customMajor",
            col:8
        },
        {
            type:"text",
            label:"岗位职级",
            value:"customRank",
            col:8
        },
        {
            type:"slot",
            label:"是否党员",
            value:"customPartyMember",
            slotName:"customPartyMember",
            col:8
        },
        {
            type:"text",
            label:"身份证号码",
            value:"customIdNum",
            col:8
        },
        {
            type:"text",
            label:"身份证有效期",
            value:"customIdNumLife",
            col:8
        },
        {
            type:"text",
            label:"紧急联系人",
            value:"customExigencyContact",
            col:8
        },
        {
            type:"text",
            label:"紧急联系人电话",
            value:"customExigencyPhone",
            labelEllipsis:true,
            col:8
        },
        {
            type:"slot",
            label:"用户状态",
            value:"customUserState",
            slotName:"customUserState",
            col:8
        },
        // {
        //     type:"text",
        //     label:"工龄",
        //     value:"workYearLevel",
        //     col:8
        // },
        {
            type:"text",
            label:"驻场开始时间",
            value:"customOnSitTime",
            col:12
        },
        {
            type:"text",
            label:"预计转正时间",
            value:"customPositiveTime",
            col:12
        },
        {
            type:"text",
            label:"实际转正时间",
            value:"customRealPositiveTime",
            col:12
        },
        {
            type:"date",
            format:"yyyy-MM-dd",
            label:"本期合同开始时间",
            value:"customContractStart",
            labelEllipsis:true,
            col:12
        },
        {
            type:"text",
            label:"本期合同终止时间",
            value:"customContractEnd",
            labelEllipsis:true,
            col:12
        },
        {
            type:"text",
            label:"合同到期提醒",
            value:"customContractExpireWarn",
            col:12
        },
        {
            type:"text",
            label:"家庭住址",
            value:"customAddress",
            col:12
        },
        {
            type:"text",
            label:"社保缴费卡号",
            value:"customSocialSecurityCard",
            col:12
        },
        {
            type:"text",
            label:"工资卡号",
            value:"customBankCard",
            col:12
        },
        {
            type:"text",
            label:"开户行",
            value:"customBankName",
            col:12
        },
        {
            type:"text",
            label:"社保所属地",
            value:"customSocialSecurityAdd",
            col:12
        },
        {
            type:"text",
            label:"开户地",
            value:"customBankAddress",
            col:12
        },
        {
            type:"slot",
            label:"有无本地公积金",
            value:"customReservefundFlag",
            labelEllipsis:true,
            slotName:"customReservefundFlag",
            col:12
        },
        {
            type:"text",
            label:"入职前社保缴纳月数",
            value:"customBeforeSocialMonth",
            labelEllipsis:true,
            col:12
        },
        {
            type:"text",
            label:"社保缴纳总月数",
            value:"customAllSociaMonth",
            labelEllipsis:true,
            col:12
        },
        {
            type:"slot",
            label:"婚姻状况",
            value:"marriageState",
            slotName:"marriageState",
            col:12
        },
        {
            type:"slot",
            label:"家庭成员情况",
            value:"familyMember",
            slotName:"familyMember",
            col:24
        }
    ],
    viewData:{
        userName:"",
        nickName:"",
        userType:"",
        email:"",
        phonenumber:"",
        sex:"",
        status:"",
        customCooperator:"",
        customJobs:"",
        customNation:"",
        customAge:"",
        birthday:"",
        customEducation:"",
        customSchool:"",
        customMajor:"",
        customRank:"",
        customPartyMember:"",
        customIdNum:"",
        customIdNumLife:"",
        customExigencyContact:"",
        customExigencyPhone:"",
        customOnSitTime:"",
        customPositiveTime:"",
        customRealPositiveTime:"",
        customUserState:"",
        customContractStart:"",
        customContractEnd:"",
        customContractExpireWarn:"",
        customAddress:"",
        customSocialSecurityCard:"",
        customBankCard:"",
        customBankName:"",
        customSocialSecurityAdd:"",
        customBankAddress:"",
        customReservefundFlag:"",
        workYearLevel:"",
        customBeforeSocialMonth:"",
        marriageState:"",
        familyMember:""
    }
});


/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>
.qilin-QilinView{

}
</style>
